// import React, { useState } from "react";
// import { Toggle } from "@/components/ui/toggle";

// const OverflowHiddenVisualization: React.FC = () => {
//   const [isOverflowHidden, setIsOverflowHidden] = useState(true);

//   return (
//     <div className="container mx-auto p-4 space-y-8">
//       <h1 className="text-3xl font-bold text-center">
//         overflow-hidden 可视化演示
//       </h1>

//       <div className="flex justify-center items-center space-x-4">
//         <span className="text-lg font-medium">overflow-hidden:</span>
//         <Toggle
//           pressed={isOverflowHidden}
//           onPressedChange={setIsOverflowHidden}
//           aria-label="Toggle overflow-hidden"
//         >
//           {isOverflowHidden ? "开启" : "关闭"}
//         </Toggle>
//       </div>

//       <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
//         {/* 文本溢出示例 */}
//         <div className="space-y-4">
//           <h2 className="text-2xl font-semibold">文本溢出</h2>
//           <div
//             className={`w-64 h-32 border-4 border-blue-500 p-4 ${
//               isOverflowHidden ? "overflow-hidden" : "overflow-visible"
//             }`}
//           >
//             <p className="text-lg">
//               这是一段很长的文本，它会溢出容器。你可以看到 overflow-hidden
//               是如何影响超出容器尺寸的内容可见性的。这个例子展示了文本如何被裁剪。
//             </p>
//           </div>
//         </div>

//         {/* 图片溢出示例 */}
//         <div className="space-y-4">
//           <h2 className="text-2xl font-semibold">图片溢出</h2>
//           <div
//             className={`w-64 h-48 border-4 border-green-500 ${
//               isOverflowHidden ? "overflow-hidden" : "overflow-visible"
//             }`}
//           >
//             <img
//               src="/placeholder.svg?height=300&width=300"
//               alt="大图片在小容器中"
//               className="w-full h-auto"
//             />
//           </div>
//         </div>

//         {/* 列表溢出示例 */}
//         <div className="space-y-4">
//           <h2 className="text-2xl font-semibold">列表溢出</h2>
//           <div
//             className={`w-48 h-40 border-4 border-yellow-500 ${
//               isOverflowHidden ? "overflow-hidden" : "overflow-visible"
//             }`}
//           >
//             <ul className="list-disc list-inside space-y-2">
//               <li>列表项 1</li>
//               <li>列表项 2</li>
//               <li>列表项 3</li>
//               <li>列表项 4</li>
//               <li>列表项 5</li>
//               <li>列表项 6</li>
//               <li>列表项 7</li>
//               <li>列表项 8</li>
//             </ul>
//           </div>
//         </div>

//         {/* 交互元素溢出 */}
//         <div className="space-y-4">
//           <h2 className="text-2xl font-semibold">交互元素溢出</h2>
//           <div
//             className={`w-48 h-48 border-4 border-purple-500 relative ${isOverflowHidden ? "overflow-hidden" : "overflow-visible"}`}
//           >
//             <div className="absolute inset-0 bg-gradient-to-r from-purple-200 to-purple-400 p-4">
//               <p className="text-lg font-medium mb-4">悬停效果！</p>
//               <div className="transform hover:scale-150 transition-transform duration-300">
//                 <div className="w-32 h-32 bg-yellow-300 flex items-center justify-center text-center">
//                   悬停放大
//                 </div>
//               </div>
//             </div>
//           </div>
//         </div>
//       </div>

//       <div className="bg-gray-100 p-6 rounded-lg">
//         <h2 className="text-2xl font-semibold mb-4">overflow-hidden 解释</h2>
//         <p className="mb-4">
//           Tailwind CSS 中的{" "}
//           <code className="bg-gray-200 px-1 rounded">overflow-hidden</code>{" "}
//           类等同于常规 CSS 中的{" "}
//           <code className="bg-gray-200 px-1 rounded">overflow: hidden;</code>。
//           它隐藏了超出容器尺寸的任何内容。这在以下情况下非常有用：
//         </p>
//         <ul className="list-disc list-inside space-y-2">
//           <li>防止文本或图像溢出其容器</li>
//           <li>创建具有动态内容的固定大小容器</li>
//           <li>实现自定义滚动行为</li>
//           <li>裁剪元素以实现视觉效果</li>
//         </ul>
//       </div>
//     </div>
//   );
// };

// export default OverflowHiddenVisualization;
